import React, { Component } from 'react';
import './index.css'

export default class Item extends Component {
	state = {
		mouse: false // 表示鼠标移入移出
	}

	// 鼠标移入移出的回调
	handleMouse = (flag) => {
		return () => {
			this.setState({mouse:flag})
		}
	}

	// 勾选、取消勾选某一个todo的回调
	handleCheck = (id) => {
		 return (event) => {
			// console.log(id, event.target.checked)
			this.props.updateTodo(id, event.target.checked)
		 }
	}

	// 删除一个todo的回调
	handleDelete = (id) => {
		if(window.confirm('确定删除吗')){
			this.props.deleteTodo(id)
		}
	}

	render() {
			const {id, name, done} = this.props
			const {mouse} = this.state
			return  (
					// js监听鼠标移入移出
					// 绑定函数的时候只能使用函数名，如果带括号则表示函数调用，在render渲染的时候，会自动执行，，如果要带参，则要使用高阶函数，或者弄匿名函数进行使用对应的函数(函数柯里化)
					<li style={{backgroundColor: mouse ? '#ddd' : '#fff'}} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
						<label>
							{/* defaultChecked初始化是否勾选，后期可以改 */}
							<input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
							<span>{name}</span>
						</label>
						<button onClick={()=>{this.handleDelete(id)}} className="btn btn-danger" style={{display: mouse ? 'block' : 'none'}} >删除</button>
					</li>
				);
	}
}
